<template>
  <div class="table-box" v-loading="loading">
    <ProTable
      ref="proTable"
      title="角色列表"
      rowKey="roleid"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" text :icon="CirclePlus" @click="openDrawer('新增')">新增角色</el-button>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="Operation" :disabled="scope.row!.isDefault" @click="_showDialog(scope.row)"
          >分配权限</el-button
        >
        <el-button type="primary" link :icon="EditPen" :disabled="scope.row!.isDefault" @click="openDrawer('编辑', scope.row)"
          >编辑</el-button
        >
      </template>
    </ProTable>
    <RoleDrawer ref="drawerRef" />
    <TreeDialog
      :rights="rights"
      :zNodes="zNodes"
      :roleId="curRow.roleid"
      :dialogVisible="dialogVisible"
      :title="'请选择 ' + curRow.rolename"
      :handleClose="handleClose"
    />
  </div>
</template>

<script setup lang="tsx" name="roleInfo">
import { ref, onMounted } from "vue";
import { CirclePlus, EditPen, Operation } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import RoleDrawer from "./components/RoleDrawer.vue";
import TreeDialog from "./components/TreeDialog.vue";
import { getAllRoleList, editRole, addRole, getRoleTree, getRoleRights } from "@/api/modules/role";

const loading = ref(false);
const proTable = ref();
const dialogVisible = ref(false);
const zNodes = ref([]);
const rights = ref([]);
const curRow: any = ref({});

const dataCallback = (data: any) => {
  loading.value = false;
  return {
    list: data
  };
};

const getTableList = (params: any) => {
  loading.value = true;
  let newParams = JSON.parse(JSON.stringify(params));
  return getAllRoleList(newParams);
};

const columns = [
  {
    prop: "roleid",
    label: "角色名ID",
    width: 120
  },
  {
    prop: "rolename",
    label: "角色描述"
  },
  {
    prop: "note",
    label: "备注信息"
  },
  { prop: "operation", label: "操作", fixed: "right", width: 240 }
];

/**
 * 显示分配权限弹窗
 */
const _showDialog = async row => {
  dialogVisible.value = true;
  curRow.value = row;
  try {
    const res = await getRoleRights({ roleid: row.roleid });
    rights.value = res.data;
  } catch (error) {
    console.log(error);
  }
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof RoleDrawer> | null>(null);
const openDrawer = (title: string, row = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addRole : title === "编辑" ? editRole : undefined,
    getTableList: proTable.value.getTableList,
    resetTableList: proTable.value.reset
  };

  drawerRef.value?.acceptParams(params);
};

/**
 * 请求用户权限结构树
 */
const getRoleTreeList = async () => {
  try {
    const res = await getRoleTree();
    zNodes.value = res.data;
  } catch (error) {
    console.log(error);
  }
};

/**
 * 关闭弹窗
 */
const handleClose = () => {
  dialogVisible.value = false;
};

onMounted(() => {
  getRoleTreeList();
});
</script>
